<template>
  <div class="login-container">
    <!-- 背景图片 -->
    <div class="login-background">
      <img src="@/assets/Login-backimage.png" alt="登录背景" class="background-image" />
      <div class="background-overlay"></div>
    </div>

    <!-- 登录区域 - 位于页面三分之一位置 -->
    <div class="login-area">
      <!-- 系统标题 -->
      <div class="system-header">
        <img src="@/assets/StuAffair_icon.png" alt="Logo" class="logo" />
        <h1 class="system-title">学工管理系统</h1>
        <p class="system-subtitle">Student Affairs Management System</p>
      </div>

      <!-- 身份选择界面 -->
      <div v-if="!selectedUserType" class="user-type-selection">
        <h2 class="selection-title">请选择登录身份</h2>
        <div class="user-type-cards">
          <div class="user-type-card" :class="{ 'selected': loginForm.userType === 'student' }"
            @click="selectUserType('student')">
            <div class="card-icon">
              <el-icon size="40">
                <User />
              </el-icon>
            </div>
            <h3>学生</h3>
          </div>

          <div class="user-type-card" :class="{ 'selected': loginForm.userType === 'teacher' }"
            @click="selectUserType('teacher')">
            <div class="card-icon">
              <el-icon size="40">
                <Avatar />
              </el-icon>
            </div>
            <h3>教师</h3>
          </div>

          <div class="user-type-card" :class="{ 'selected': loginForm.userType === 'admin' }"
            @click="selectUserType('admin')">
            <div class="card-icon">
              <el-icon size="40">
                <Setting />
              </el-icon>
            </div>
            <h3>管理员</h3>
          </div>
        </div>
      </div>

      <!-- 登录表单界面 -->
      <div v-else-if="!showForgotPassword" class="login-form-section">
        <div class="form-header">
          <div class="selected-identity">
            <el-icon>
              <User />
            </el-icon>
            <span>{{ getIdentityName(loginForm.userType) }}</span>
            <el-button type="text" size="small" @click="goBackToSelection" class="change-identity-btn">
              切换身份
            </el-button>
          </div>
        </div>

        <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form" size="large">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" :placeholder="getUsernamePlaceholder()" prefix-icon="User"
              clearable />
          </el-form-item>

          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" prefix-icon="Lock" show-password
              clearable @keyup.enter="handleLogin" />
          </el-form-item>
          <el-form-item>
            <div class="login-options">
              <div class="left-options">
                <el-checkbox v-model="loginForm.rememberMe">
                  记住我
                </el-checkbox>
                <el-button v-if="loginForm.rememberMe" type="text" size="small" @click="clearCurrentUserStorage"
                  class="clear-storage-btn">
                  清除保存
                </el-button>
              </div>
              <el-link type="primary" :underline="false" @click="showForgotPassword = true">
                忘记密码？
              </el-link>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="login-button" :loading="loading" @click="handleLogin">
              {{ loading ? '登录中...' : '登录' }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 忘记密码界面 -->
      <div v-else-if="!showResetPassword" class="forgot-password-section">
        <div class="form-header">
          <div class="forgot-password-title">
            <el-button type="text" size="small" @click="goBackToLogin" class="back-to-login-btn">
              <el-icon>
                <ArrowLeft />
              </el-icon>
              返回登录
            </el-button>
            <h2>找回密码</h2>
          </div>
        </div>

        <el-form ref="forgotFormRef" :model="forgotForm" :rules="forgotRules" class="forgot-form" size="large">
          <el-form-item prop="email">
            <el-input v-model="forgotForm.email" placeholder="请输入邮箱地址" prefix-icon="Message" clearable />
          </el-form-item>

          <el-form-item prop="verificationCode">
            <div class="verification-input">
              <el-input v-model="forgotForm.verificationCode" placeholder="请输入验证码" prefix-icon="Key" clearable
                :validate-event="false" @keyup.enter="handleVerifyCode" />
              <el-button type="primary" :disabled="!forgotForm.email || countdown > 0"
                @click="handleSendVerificationCode" class="send-code-btn">
                {{ countdown > 0 ? `${countdown}s后重发` : '发送验证码' }}
              </el-button>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="verify-button" :loading="verifying" @click="handleVerifyCode">
              {{ verifying ? '验证中...' : '验证' }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 重置密码界面 -->
      <div v-else class="reset-password-section">
        <div class="form-header">
          <div class="reset-password-title">
            <el-button type="text" size="small" @click="goBackToForgotPassword" class="back-to-forgot-btn">
              <el-icon>
                <ArrowLeft />
              </el-icon>
              返回验证
            </el-button>
            <h2>重置密码</h2>
          </div>
        </div>

        <el-form ref="resetFormRef" :model="resetForm" :rules="resetRules" class="reset-form" size="large">
          <el-form-item prop="newPassword">
            <el-input v-model="resetForm.newPassword" type="password" placeholder="请输入新密码" prefix-icon="Lock"
              show-password clearable />
          </el-form-item>

          <el-form-item prop="confirmPassword">
            <el-input v-model="resetForm.confirmPassword" type="password" placeholder="请确认新密码" prefix-icon="Lock"
              show-password clearable @keyup.enter="handleResetPassword" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="reset-button" :loading="resetting" @click="handleResetPassword">
              {{ resetting ? '重置中...' : '重置密码' }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 版权信息 -->
      <div class="login-footer">
        <p class="copyright">
          © 2024 学工管理系统. All rights reserved.
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { User, Avatar, Setting, ArrowLeft } from '@element-plus/icons-vue'
import { sendVerificationCode as apiSendVerificationCode, resetPassword as apiResetPassword, login, type LoginResponseData } from '../api/auth_test'
import { getToken, setToken } from '../api/request'

const router = useRouter()
const loginFormRef = ref<FormInstance>()
const forgotFormRef = ref<FormInstance>()
const resetFormRef = ref<FormInstance>()
const loading = ref(false)
const verifying = ref(false)
const resetting = ref(false)
const selectedUserType = ref(false)
const showForgotPassword = ref(false)
const showResetPassword = ref(false)
const countdown = ref(0)
const code = ref()//保存验证码进行验证


function autoFillLoginForm() {
  const lastUserType = localStorage.getItem('lastUserType');

  if (lastUserType) {
    const storageKey = `login_${lastUserType}`;
    const storedData = localStorage.getItem(storageKey);

    if (storedData) {
      try {
        const userData = JSON.parse(storedData);
        if (userData.rememberMe) {
          loginForm.userType = lastUserType;
          loginForm.username = userData.username;
          loginForm.password = atob(userData.password); // 解密
          loginForm.rememberMe = true;
          selectedUserType.value = true; // 自动进入表单界面
        }
      } catch (error) {
        console.error('解析存储的登录数据失败:', error);
      }
    }
  }
}
// 页面加载时调用
onMounted(() => {
  autoFillLoginForm();
});

// 清除当前身份的保存数据
const clearCurrentUserStorage = () => {
  clearUserTypeStorage(loginForm.userType);
  loginForm.rememberMe = false;
  ElMessage.success('已清除保存的登录信息');
}
// 登录表单数据
const loginForm = reactive({
  username: '',
  password: '',
  userType: '',
  rememberMe: false
})

// 忘记密码表单数据
const forgotForm = reactive({
  email: '',
  verificationCode: ''
})

// 重置密码表单数据
const resetForm = reactive({
  newPassword: '',
  confirmPassword: ''
})

// 登录表单验证规则
const loginRules: FormRules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 20, message: '账号长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ]
}

// 忘记密码表单验证规则
const forgotRules: FormRules = {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  verificationCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: '验证码为6位数字', trigger: 'change' }
  ]
}

// 重置密码表单验证规则
const resetRules: FormRules = {
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (_rule, value, callback) => {
        if (value !== resetForm.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}


// 选择用户类型 - 添加自动填充
const selectUserType = (userType: string) => {
  loginForm.userType = userType;
  selectedUserType.value = true;

  // 检查该身份是否有保存的登录信息
  const storageKey = `login_${userType}`;
  const storedData = localStorage.getItem(storageKey);

  if (storedData) {
    try {
      const userData = JSON.parse(storedData);
      if (userData.rememberMe) {
        loginForm.username = userData.username;
        loginForm.password = atob(userData.password);
        loginForm.rememberMe = true;
        ElMessage.success(`已自动填充${getIdentityName(userType)}的保存信息`);
        return;
      }
    } catch (error) {
      console.error('解析存储的登录数据失败:', error);
    }
  }

  // 如果没有保存的信息，清空表单
  loginForm.username = '';
  loginForm.password = '';
  loginForm.rememberMe = false;
}
// 返回身份选择 - 保留当前身份的数据
const goBackToSelection = () => {
  // 不清空当前表单数据，只是返回选择界面
  selectedUserType.value = false;
}

// 清除特定身份的保存数据
const clearUserTypeStorage = (userType: string) => {
  const storageKey = `login_${userType}`;
  localStorage.removeItem(storageKey);

  // 如果清除的是当前最后使用的身份，也清除lastUserType
  const lastUserType = localStorage.getItem('lastUserType');
  if (lastUserType === userType) {
    localStorage.removeItem('lastUserType');
  }
}

// 获取身份名称
const getIdentityName = (userType: string) => {
  const names: Record<string, string> = {
    student: '学生',
    teacher: '教师',
    admin: '管理员'
  }
  return names[userType] || ''
}

// 根据 roleId 获取角色名称
const getRoleName = (roleId: number): string => {
  const roleMap: Record<number, string> = {
    1: '系统管理员',
    2: '辅导员',
    3: '班主任',
    4: '学生'
  }
  return roleMap[roleId] || '未知角色'
}

// 获取用户名占位符
const getUsernamePlaceholder = () => {
  const placeholders: Record<string, string> = {
    student: '请输入学号',
    teacher: '请输入工号',
    admin: '请输入管理员账号'
  }
  return placeholders[loginForm.userType] || '请输入账号'
}


// 处理登录 - 登录时按身份分别存储
const handleLogin = async () => {
  if (!loginFormRef.value) return

  // 存储功能 - 按身份分别存储
  if (loginForm.rememberMe) {
    const storageKey = `login_${loginForm.userType}`;
    const userData = {
      username: loginForm.username,
      password: btoa(loginForm.password), // base64简单加密
      rememberMe: true
    };
    localStorage.setItem(storageKey, JSON.stringify(userData));
    localStorage.setItem('lastUserType', loginForm.userType);
  } else {
    // 如果不记住，清除该身份的存储数据
    const storageKey = `login_${loginForm.userType}`;
    localStorage.removeItem(storageKey);
    localStorage.removeItem('lastUserType');
  }

  console.log('开始进行登录测试')
  await loginFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        // 调用登录接口
        const response = await login({
          username: loginForm.username,
          password: loginForm.password
        })

        console.log("登录响应:", (response.code as string) === '200')
        if ((response.code as string) === '200') {
          const userData = response.data as LoginResponseData

          // 获取角色名称并打印
          const roleName = getRoleName(userData.roleId)
          console.log(`%c${roleName}登录成功！`, 'color: #67C23A; font-size: 16px; font-weight: bold;')
          console.log('用户信息:', {
            userId: userData.userId,
            nickname: userData.nickname,
            roleId: userData.roleId,
            roleName: roleName
          })

          // 读取并保存 token（优先响应体，其次响应头已自动写入的本地存储）
          let token: string | null = (response as any)?.data?.token || null
          if (!token && typeof response?.msg === 'string') {
            token = response.msg
          }
          const tokenInStore = getToken()
          if (!token && tokenInStore) {
            token = tokenInStore
          }
          if (token) {
            setToken(token)
            console.log('%cToken:', 'color: #409EFF; font-size: 14px; font-weight: bold;', token)
            console.log('Token 已存储在本地，后续请求会自动携带')
          } else {
            console.warn('未获取到 token，请检查后端是否在响应头或响应体返回 token')
          }

          ElMessage.success(`${roleName}登录成功！`)

          // 存储用户信息到本地
          localStorage.setItem('userType', loginForm.userType)
          localStorage.setItem('userInfo', JSON.stringify(userData))
          localStorage.setItem('roleId', String(userData.roleId))
          localStorage.setItem('roleName', roleName)

          // 根据用户类型跳转到不同页面
          switch (loginForm.userType) {
            case 'student':
              router.push('/main/home')
              break
            case 'teacher':
              router.push('/main/home')
              break
            case 'admin':
              router.push('/main/home')
              break
            default:
              router.push('/main/home')
          }
        } else {
          ElMessage.error(response.msg || '登录失败')
        }
      } catch (error) {
        ElMessage.error('登录失败，请检查网络连接或稍后重试')
      } finally {
        loading.value = false
      }
    }
  })
}

// 发送验证码
const handleSendVerificationCode = async () => {
  if (!forgotForm.email) {
    ElMessage.warning('请先输入邮箱地址')
    return
  }

  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(forgotForm.email)) {
    ElMessage.error('请输入正确的邮箱格式')
    return
  }

  try {
    const res = await apiSendVerificationCode(forgotForm.email)
    if (res.code === '200') {
      // 存储验证码到状态变量
      code.value = res.msg
      countdown.value = 60
      const timer = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
          clearInterval(timer)
        }
      }, 1000)
      ElMessage.success('验证码已发送到您的邮箱')
    } else {
      ElMessage.error(res.msg || '发送验证码失败')
    }
  } catch (error) {
    ElMessage.error('发送验证码失败，请重试')
  }
}

// 验证验证码
const handleVerifyCode = async () => {
  if (!forgotFormRef.value) return
  // console.log("验证码:", code.value)
  // console.log("输入验证码:", forgotForm.verificationCode)
  if (forgotForm.verificationCode !== code.value) {
    ElMessage.error('验证码不正确，请重试')
    return
  }
  ElMessage.success('验证码验证成功')

  showResetPassword.value = true;
}

// 重置密码
const handleResetPassword = async () => {
  if (!resetFormRef.value) return

  await resetFormRef.value.validate(async (valid) => {
    if (valid) {
      resetting.value = true
      try {
        // 调用后端重置密码接口
        const res = await apiResetPassword({
          email: forgotForm.email,
          authCode: forgotForm.verificationCode,
          password: resetForm.newPassword
        })
        if (res.code === '200') {
          ElMessage.success('密码重置成功！请使用新密码登录')
          // 返回登录页面
          goBackToLogin()
        } else {
          ElMessage.error(res.msg || '密码重置失败，请重试')
        }
      } catch (error) {
        ElMessage.error('密码重置失败，请重试')
      } finally {
        resetting.value = false
      }
    }
  })
}

// 返回登录页面
const goBackToLogin = () => {
  showForgotPassword.value = false
  showResetPassword.value = false
  forgotForm.email = ''
  forgotForm.verificationCode = ''
  resetForm.newPassword = ''
  resetForm.confirmPassword = ''
  countdown.value = 0
}

// 返回忘记密码页面
const goBackToForgotPassword = () => {
  showResetPassword.value = false
  resetForm.newPassword = ''
  resetForm.confirmPassword = ''
}
</script>

<style scoped>
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8vw;
  /* 左侧留白，让登录区域位于左三分之一位置 */
}

/* 背景图片样式 */
.login-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 0.4) 100%);
}

/* 登录区域 - 位于页面左三分之一位置 */
.login-area {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  padding: 0 20px;
  animation: slideInUp 0.8s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 系统标题 */
.system-header {
  text-align: center;
  margin-bottom: 40px;
  color: white;
}

.logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  padding: 10px;
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.system-title {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.system-subtitle {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
  font-weight: 300;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 身份选择界面 */
.user-type-selection {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.selection-title {
  text-align: center;
  margin: 0 0 30px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.user-type-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.user-type-card {
  background: #fff;
  border: 2px solid #e4e7ed;
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.user-type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-color: #409eff;
}

.user-type-card.selected {
  border-color: #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}

.card-icon {
  margin-bottom: 16px;
  color: #667eea;
  transition: all 0.3s ease;
}

.user-type-card.selected .card-icon {
  color: white;
}

.user-type-card h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  transition: color 0.3s ease;
}

.user-type-card.selected h3 {
  color: white;
}

.user-type-card p {
  margin: 0;
  font-size: 14px;
  color: #909399;
  transition: color 0.3s ease;
}

.user-type-card.selected p {
  color: rgba(255, 255, 255, 0.8);
}

/* 登录表单界面 */
.login-form-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: fadeIn 0.5s ease-out;
}

/* 忘记密码界面 */
.forgot-password-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: fadeIn 0.5s ease-out;
}

/* 重置密码界面 */
.reset-password-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-header {
  margin-bottom: 30px;
  text-align: center;
}

.selected-identity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

/* 忘记密码标题 */
.forgot-password-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.forgot-password-title h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.back-to-login-btn {
  color: #667eea;
  font-size: 14px;
  align-self: flex-start;
}

.back-to-login-btn:hover {
  color: #764ba2;
}

/* 重置密码标题 */
.reset-password-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.reset-password-title h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.back-to-forgot-btn {
  color: #667eea;
  font-size: 14px;
  align-self: flex-start;
}

.back-to-forgot-btn:hover {
  color: #764ba2;
}

.change-identity-btn {
  margin-left: 12px;
  color: #667eea;
}

.change-identity-btn:hover {
  color: #764ba2;
}

/* 登录表单 */
.login-form {
  width: 100%;
}

.login-form .el-form-item {
  margin-bottom: 24px;
}

/* 忘记密码表单 */
.forgot-form {
  width: 100%;
}

.forgot-form .el-form-item {
  margin-bottom: 24px;
}

/* 重置密码表单 */
.reset-form {
  width: 100%;
}

.reset-form .el-form-item {
  margin-bottom: 24px;
}

/* 验证码输入框 */
.verification-input {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.verification-input .el-input {
  flex: 1;
}

.send-code-btn {
  white-space: nowrap;
  min-width: 120px;
  height: 48px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
}

.login-form .el-input {
  height: 48px;
}

.login-form .el-input__wrapper {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

.login-form .el-input__wrapper:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #409eff;
}

.login-form .el-input__wrapper.is-focus {
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  border-color: #409eff;
}

/* 登录选项 */
.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.login-options .el-checkbox {
  color: #606266;
}

.login-options .el-link {
  font-size: 14px;
}

/* 登录按钮 */
.login-button {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.login-button:active {
  transform: translateY(0);
}

/* 验证按钮 */
.verify-button {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
}

.verify-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.verify-button:active {
  transform: translateY(0);
}

/* 重置密码按钮 */
.reset-button {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
}

.reset-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.reset-button:active {
  transform: translateY(0);
}

/* 登录页脚 */
.login-footer {
  margin-top: 30px;
  text-align: center;
}

.copyright {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .login-container {
    padding-left: 5vw;
  }

  .login-area {
    max-width: 350px;
  }
}

@media (max-width: 768px) {
  .login-container {
    padding-left: 3vw;
    padding-right: 3vw;
  }

  .login-area {
    max-width: 100%;
    padding: 0 15px;
  }

  .user-type-cards {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .user-type-card {
    padding: 25px 15px;
  }

  .login-form-section {
    padding: 30px 20px;
  }

  .system-title {
    font-size: 28px;
  }

  .system-subtitle {
    font-size: 14px;
  }

  .logo {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding-left: 2vw;
    padding-right: 2vw;
    align-items: flex-start;
    padding-top: 10vh;
  }

  .login-area {
    max-width: 100%;
    padding: 0 10px;
  }

  .user-type-selection,
  .login-form-section {
    padding: 25px 15px;
  }

  .system-title {
    font-size: 24px;
  }

  .system-subtitle {
    font-size: 12px;
  }

  .logo {
    width: 50px;
    height: 50px;
  }
}

/* 加载动画 */
.login-button.is-loading {
  pointer-events: none;
}

/* 表单验证错误样式 */
:deep(.el-form-item.is-error .el-input__wrapper) {
  box-shadow: 0 0 0 1px #f56c6c inset;
  border-color: #f56c6c;
}

/* 输入框图标样式 */
:deep(.el-input__prefix-inner) {
  color: #909399;
}

:deep(.el-input__suffix-inner) {
  color: #909399;
}

/* 复选框样式 */
:deep(.el-checkbox__label) {
  color: #606266;
  font-size: 14px;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #667eea;
  border-color: #667eea;
}

/* 链接样式 */
:deep(.el-link--primary) {
  color: #667eea;
}

:deep(.el-link--primary:hover) {
  color: #764ba2;
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.left-options {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clear-storage-btn {
  color: #f56c6c;
  font-size: 12px;
  padding: 0 4px;
}

.clear-storage-btn:hover {
  color: #f78989;
}
</style>
